<style lang="scss">
.app-table-realtion-page {
  .z-crud-page__left {
    display: none !important;
    overflow: hidden;
  }
  .z-crud-page {
    --z-crud-page-tongji-con: 0 !important;
  }
  .z-crud-table__handle-detail {
    display: none !important;
  }
  .z-crud-table__icon_detail {
    display: none !important;
  }
  .z-crud-table__change-view {
    display: none !important;
  }
  .z-crud-table__icon_batchDelete {
    display: none;
  }
}

.AppTableRealtionEditCom {
  &[data-edit] {
    .fox-form__add {
      display: none;
    }
    .fox-form__edit {
      margin-left: 0;
    }
  }
  &:not([data-edit]) {
    .fox-form__edit {
      display: none;
    }
  }
}

</style>

<template>
  <div class="app-table-realtion-page">
    <z-crud-page :left-span="0" :main-span="24" :selectable="false" :obj="testObj" >
      <template #list_item_content="scope">
        <div style="height: 120px;">{{scope.getColumnByKey('sourceTable1')}}</div>
      </template>
    </z-crud-page>
  </div>
</template>
<script>
import CurdHelper from "@/zpkgs/ext/CurdHelper";

import FoxFormTemplate from "./FoxForm/FoxFormTemplate";
import {createEasyForm} from "../../../babel-static/hooks";


export default {
  name: 'AppTableRelationPage',
  props: {
    prefix: {
      type: String,
      default: ''
    }
  },
  data() {
    let pageCtx = this
    let EditCom = CurdHelper.defDialogView( {
      content: `<div v-loading="tool.state.loading">
        <fox-form-template
            v-if="tool.state.inited"
            :properties="tool.properties"
           @form-submit="tool.onSubmit"
            @form-ready="tool.onReady"
            :form-config="{labelInline: true}"
            :handleProp="handleProp"
        ></fox-form-template>
</div>`,
      setup(props, outerCtx) {
        console.log(outerCtx)
        let tool = createEasyForm({
          handleProperties(properties) {
            // console.log('handleProperties', properties)
            // return layoutGrid([
            //   {start: 0, end: 1, gutter: 20, defaultSpan: 8 },
            // ],properties)
            return properties
          }
        });
        let {onMounted} = vueCompositionAPI
        onMounted(async () => {
          let tableOption = {
            url:`${pageCtx.prefix}/field/getArr`,
            option:{
              autoSubmit: true,
              url:`${pageCtx.prefix}/field/saveTable`,
              editUrl: `${pageCtx.prefix}/field/updateTable`,
              initUrl: `${pageCtx.prefix}/field/getDefault`
              // detailUrl:'/zy-boot/field/getTableByName?tableName=ce_cs',
            }
          }
          if (props.isEdit) {
            tableOption.option.detailUrl = `/zy-boot/field/getTableByName?tableName=${props.row.tableName}`
          }
          tool.onSubmitSuccess = function () {
            outerCtx.emit('confirm')
          }
          tool.onFormReady = function () {
            if (!props.isEdit) {
              tool.load(tableOption.option.initUrl)
            }
          }
          tool.setOption(tableOption.option);
          await tool.init(tableOption.url);
        })

        function handleProp(arrItem) {
          if (!arrItem.ui) {
            arrItem.ui = {}
          }
          arrItem.ui.disable = function (fieldCtx) {
            // console.log('fieldCtx', fieldCtx.CurCmField.getProps())
            let props = fieldCtx.CurCmField.getProps()
            let pathArr = props.pathArr ?? []
            if (pathArr.length > 2) {
              let arrKey = pathArr[pathArr.length - 3]
              let rowKey = pathArr[pathArr.length - 2]
              // console.log(fieldCtx, props)
              if (arrKey === 'arr' && rowKey === 0)  {
                return true
              }
            }
            return false
          }
        }

        return {
          tool,
          handleProp
        }
      },
      dialogProps: {
        class: 'AppTableRealtionEditCom',
        width: '80vw'
      },
    })


    let DetailCom = CurdHelper.defDialogView( {
      content: `
    <z-descriptions :column="1" title="">
      <template slot="tbody__before">
        <colgroup>
          <col width="150"></col>
        </colgroup>
      </template>
      <template v-for="(item, key) in row">
        <z-descriptions-item v-if="columnKeys.includes(key)"
        :label="findColumnDefByKey(key, 'label')" >
          <div>{{item}}</div>
        </z-descriptions-item>
      </template>
  </z-descriptions>
  `,
      dialogProps: {
        class: 'DetailCom' + ZY.rid()
      }
    })

    return {
      testObj: {
        treeOption: {
          // url: '/api/demo1/tree',
          // rightMenu: [
          //   {
          //     name: '复制',
          //     command: 'copy'
          //   },
          //   {
          //     name: '转发',
          //     command: 'send'
          //   }
          // ],
          // // treeIdKey: 'id',
          // searchIdKey: 'tree_id'
        },
        panelOption: {
          // url: '/api/demo1/tongji',
        },
        tableOption: {
          defaultUrl: `${pageCtx.prefix}/field/getTableList`,
          // defaultUrl: '/api/empty_list',
          ajaxIdKey: 'tableName',
          urlMap: {
            del:  `${pageCtx.prefix}/field/delTable`
          }
        },
        EditCom,
        DetailCom
      },
    }
  },
  created() {
    CustomCusComponent.registerOnce(FoxFormTemplate)
  }
}
</script>
